<template>
	<view>
		<view class="u-abso u-abso-l-0 u-abso-t-0">
			<u-image width="750" height="469" src="/static/infoBanner.png"></u-image>
		</view>
		<view class="u-flex u-row-center u-col-center u-rela white" :style="{paddingTop: menu.top + 'px',height: menu.height+'px',boxSizing: 'content-box'}">个人中心</view>
		<view class="u-p-30 u-rela">
			<view class="u-flex u-col-center">
				<u-avatar :src="userInfo.avatar" size="140"></u-avatar>
				<view class="u-m-l-30 u-font-34 u-font-bold white">
					<view v-if="isLogin">{{userInfo.nickname}}</view>
					<view v-else>请登录</view>
				</view>
			</view>
			<view class="u-type-white-bg u-radius-10 u-m-tb-30">
				<view class="u-p-lr-30" @click="navigatorTo('/pages/order/index?current=0')">
					<view class="u-p-t-30">
						<u-section title="我的订单" :show-line="false" sub-title="全部订单"></u-section>
					</view>
				</view>
				<u-grid :border="false" hover-class="none"> 
					<u-grid-item @click="navigatorTo('/pages/order/index?current=1')">
						<u-icon name="/static/user/u1.png" width="54" height="54" label="待发货" label-pos="bottom" margin-top="20" label-size="24"></u-icon>
					</u-grid-item>
					<u-grid-item @click="navigatorTo('/pages/order/index?current=2')">
						<u-icon name="/static/user/u2.png" width="54" height="54" label="已发货" label-pos="bottom" margin-top="20" label-size="24"></u-icon>
					</u-grid-item>
					<u-grid-item @click="navigatorTo('/pages/order/index?current=3')">
						<u-icon name="/static/user/u3.png" width="54" height="54" label="已完成" label-pos="bottom" margin-top="20" label-size="24"></u-icon>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="u-p-lr-30 u-type-white-bg u-radius-10 u-m-tb-30">
				<view class="u-p-t-30">基本功能</view>
				<u-grid col="4" hover-class="none" :border="false">
					<u-grid-item  @click="navigatorTo('/pages/user/info')">
						<u-icon name="/static/user/u4.png" width="40" height="40" label="个人信息" label-pos="bottom" margin-top="20" label-size="24"></u-icon>
					</u-grid-item>
					<u-grid-item  @click="navigatorTo('/pages/user/answerRecord/index')">
						<u-icon name="/static/user/u5.png" width="40" height="40" label="答题记录" label-pos="bottom" margin-top="20" label-size="24"></u-icon>
					</u-grid-item>
					<u-grid-item  @click="navigatorTo('/pages/address/index')">
						<u-icon name="/static/user/u6.png" width="40" height="40" label="地址管理" label-pos="bottom" margin-top="20" label-size="24"></u-icon>
					</u-grid-item>
					<u-grid-item   @click="logout">
						<u-icon name="/static/user/u7.png" width="40" height="40" label="退出登录" label-pos="bottom" margin-top="20" label-size="24"></u-icon>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			
			}
		},
		onLoad() {
		
		},
		onShow(){
			this.$u.api.getUserInfo().then(res => {
				this.$u.vuex('userInfo',res.data)
				this.$u.vuex('isLogin',true)
			}).catch(err => {
				this.$u.vuex('userInfo',{})
				this.$u.vuex('isLogin',false)
				this.$u.route({url: '/pages/guide/index',type: 'redirectTo'})
			})
		},
		methods: {
			// 跳转页面
			navigatorTo(url){
				if(!this.isLogin) return uni.redirectTo({
					url: '/pages/guide/index'
				})
				this.$u.route(url)
			},
			// 退出登录
			logout(){
				this.$u.vuex('userInfo',{})
				this.$u.vuex('isLogin',false)
				this.$u.toast('退出成功')
				setTimeout(() => {
					this.$u.route({url: '/pages/guide/index',type: 'redirectTo'})
				},1500)
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>
